<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{ height: '100%' }">
    <template #header>
      <strong>无缝滚动</strong>
    </template>
    <div style="display: flex;justify-content: space-evenly;">
      <app-seamless-scroll>
        <nav style="height: 30px;" v-for="item in dataList" :key="item.date">{{ item.title }}</nav>
      </app-seamless-scroll>

      <app-seamless-scroll :single="true">
        <nav style="height: 30px;" v-for="item in dataList" :key="item.date">{{ item.title }}</nav>
      </app-seamless-scroll>

    </div>

  </el-card>
</template>

<script setup lang="ts" name="seamlessScroll">
const dataList = [
  {
    title: 'Vue3.0 无缝滚动组件展示数据第1条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第2条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第3条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第4条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第5条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第6条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第7条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第8条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第9条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第10条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第11条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第12条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第13条',
    date: Date.now(),
  },
  {
    title: 'Vue3.0 无缝滚动组件展示数据第14条',
    date: Date.now(),
  },
]
</script>

<style scoped lang="less">

</style>
